<template>
    <div class="app-container home">
        <!-- <el-row class="sort">
            <el-col class="game-item" v-for="item,i in list" :key="i" @mouseover="onMouseOver(i)">
                <div class="no">{{ i+1 }}</div>
                <router-link :to="'/game/'+item.id"><el-button type="primary">{{ item.name }}</el-button></router-link>
                <router-link :to="'/game/'+item.id" class="router-link"><el-button circle v-if="i==current"><el-icon><Edit/></el-icon></el-button></router-link>
                <el-button circle v-if="i==current&&i!=0" v-on:click="onUp(i)"><el-icon><Top/></el-icon></el-button>
                <el-button circle v-if="i==current&&i!=(list.length-1)" v-on:click="onDown(i)"><el-icon><Bottom/></el-icon></el-button>
                <el-button circle v-if="i==current" color="red" @click="deleteGameDialogVisible=true"><el-icon><DeleteFilled/></el-icon></el-button>
            </el-col>
        </el-row>
        <el-divider /> -->
        <el-button type="primary" @click="onApply">应用游戏排序</el-button>
        <el-button type="primary" @click="addGameDialogVisible=true">创建游戏</el-button>
    </div>
    <el-table :data="list">
        <el-table-column property="id" label="ID" width="50" />
        <el-table-column property="sort" label="排序" width="80"/>
        <el-table-column label="游戏名称" width="150">
            <template #default="scope">
                <el-tag>{{ scope.row.name }}</el-tag>
            </template>
        </el-table-column>
        <el-table-column label="操作">
            <template #default="scope">
                <router-link :to="'/game/'+scope.row.id" class="router-link"><el-button circle size="small"><el-icon><Edit/></el-icon></el-button></router-link>
                <el-button circle type="danger" size="small" @click="onRemoveGame(scope.row.id)"><el-icon><DeleteFilled/></el-icon></el-button>
                <el-button circle size="small" v-if="scope.$index!=0" v-on:click="onUp(scope.$index)"><el-icon><Top/></el-icon></el-button>
                <el-button circle size="small" v-if="scope.$index!=(list.length-1)" v-on:click="onDown(scope.$index)"><el-icon><Bottom/></el-icon></el-button>
            </template>
        </el-table-column>
        <el-table-column property="created" label="创建时间" width="170"/>
    </el-table>
    <el-dialog v-model="addGameDialogVisible" width="600" title="创建游戏">
        <el-form :model="gameModel" :rules="gameRules" label-width="80px">
            <el-form-item label="游戏名称" prop="name">
                <el-input v-model="gameModel.name"></el-input>
            </el-form-item>
            <el-form-item label="游戏类型" prop="config">
                <el-select v-model="gameModel.type" placeholder="请选择">
                    <el-option v-for="item,i in gameTypes" :key="i" :label="item.label" :value="item.value"> </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="游戏排序" prop="sort">
                <el-input-number v-model="gameModel.sort"></el-input-number>
            </el-form-item>
       </el-form>
       <template #footer>
           <el-button @click="addGameDialogVisible=false">取消</el-button>
           <el-button type="primary" @click="onSureAddGame">确定</el-button>
       </template>
    </el-dialog>
    <el-dialog v-model="deleteGameDialogVisible" width="300" title="提示">
        <span>确定要删除游戏？</span>
        <template #footer>
            <el-button @click="deleteGameDialogVisible=false">取消</el-button>
            <el-button type="primary" @click="onSureRemoveGame">确定</el-button>
        </template>
    </el-dialog>
</template>
<script lang="ts">
import { defineComponent, onMounted, reactive, ref } from 'vue';
import { ElRow,ElCol,ElButton,ElDivider, FormRules } from 'element-plus';
import { Top,Bottom,Edit,DeleteFilled } from '@element-plus/icons-vue';
import ApiHelper from '@/api/ApiHelper';
import GameModel from '@/game/model/GameModel';
/*interface GameModel{
    name:string,
    config:string,
    sort:number,
    type:number
}*/
export default defineComponent({
    name:'OrderView',
    components:{ElButton,Edit,Bottom,Top,DeleteFilled},
    setup(){
        //游戏列表
        const list=ref<any[]>([])
        const current=ref(-1)
        //游戏配置json
        const gameConfig={
            type:0,
            layer:[
                {name:"背景层",children:[]},
                {name:"游戏层",children:[]},
                {name:"前景层",children:[]},
                {name:"UI层",children:[]},
                {name:"顶层",children:[]}
            ]
        }
        //表单数据
        const gameModel=reactive<GameModel>({
            name:'',
            config:JSON.stringify(gameConfig),
            sort:0,
            type:0
        })
        //表单验证规则
        const gameRules=reactive<FormRules<GameModel>>({
            name:[{
                required:true,
                message:'请输入游戏名称',
                trigger: 'blur'
            }],
            config:[{
                required:true,
                message:'请输入游戏配置',
                trigger: 'blur'
            }],
            sort:[{
                required:true,
                message:'请输入游戏排序',
                trigger: 'blur'
            }],
            type:[{
                required:true,
                message:'请选择游戏类型',
                trigger: 'change'
            }]
        })
        //是否显示创建游戏弹窗
        const addGameDialogVisible=ref(false)
        //是否显示删除游戏弹窗
        const deleteGameDialogVisible=ref(false)
        //待删除的游戏id
        const delete_game_id=ref(-1)
        //游戏类型
        const gameTypes=[
            {label:'寻隐者不遇',value:0},
            {label:'松下问童子',value:1},
            {label:'言师采药去',value:2},
            {label:'只在此山中',value:3},
            {label:'云深不知处',value:4}
        ]
        const onMouseOver=(i:number)=>{
            //console.log(i)
            current.value=i
        }
        //排序上移
        const onUp=(i:number)=>{
            //console.log(i,'up')
            const tem=list[i-1]
            list[i-1]=list[i]
            list[i]=tem
        }
        //排序下移
        const onDown=(i:number)=>{
            //console.log(i,'down')
            const tem=list[i+1]
            list[i+1]=list[i]
            list[i]=tem
        }
        //更新游戏排序
        const onApply=()=>{
            //
            for(let i=0;i<list.value.length;i++){
                //console.log(list[i])
                const item=list.value[i]
                item.sort=i
            }
            console.log(list)
            ApiHelper.getInstance().updateGameOrder(list.value).then((res:any)=>{
                //console.log(res)
                getGameInfo()
            }).catch((err:any)=>{
                console.log(err)
            })
        }
        //获取游戏列表
        const getGameInfo=()=>{
            ApiHelper.getInstance().getGameInfo().then((res:any[])=>{
                //console.log(res)
                list.value=res
                gameModel.sort=list.value.length
            })
        }
        //确定添加新游戏
        const onSureAddGame=()=>{
            //console.log(gameModel)
            gameConfig.type=gameModel.type
            gameModel.config=JSON.stringify(gameConfig)
            ApiHelper.getInstance().addGame(gameModel).then((res:any)=>{
                //console.log(res)
                getGameInfo()
                addGameDialogVisible.value=false
            }).catch((err:any)=>{
                //console.log(err)
            })
        }
        //弹窗询问是否删除游戏
        const onRemoveGame=(id:number)=>{
            delete_game_id.value=id
            deleteGameDialogVisible.value=true
        }
        //确定删除游戏
        const onSureRemoveGame=()=>{
            ApiHelper.getInstance().removeGame(delete_game_id.value).then((res:any)=>{
                getGameInfo()
                deleteGameDialogVisible.value=false
            })
        }
        onMounted(()=>{
            //console.log('onMounted')
            getGameInfo()
            /*const res=Global.getInstance().game_list
            list.length=0
                for(let i=0;i<res.length;i++){
                    list.push(res[i])
                }*/
        })
        return {
            list,
            current,
            gameModel,
            gameRules,
            addGameDialogVisible,
            deleteGameDialogVisible,
            delete_game_id,
            gameTypes,
            onMouseOver,
            onUp,onDown,
            onApply,
            onSureAddGame,
            onRemoveGame,
            onSureRemoveGame
        }
    }
})
</script>
<style scoped lang="scss">
.app-container{
    margin: 10px;
}
.home {
  .sort{
    gap: 10px;
    .no{
      display: inline;
      padding: 5px 10px;
    }
  }
  blockquote {
    padding: 10px 20px;
    margin: 0 0 20px;
    font-size: 17.5px;
    border-left: 5px solid #eee;
  }
  hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #eee;
  }
  .col-item {
    margin-bottom: 20px;
  }
}
.router-link{
            margin: 12px;
        }
</style>